<template>
  <div class="work-page">
    <div class="duty-box">
      <span>今天值班情况: {{ duty.name }} {{ duty.tel }} </span>
      <el-select v-model="duty.name" placeholder="请选择" @change="onDutyChange">
        <el-option v-for="opt in dutyOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
      </el-select>
      <el-button type="primary" size="mini">选择当值人员</el-button>
    </div>

    <div class="wrapper">
      <h3 class="title">案件处理状态</h3>
      <div class="card-box">
        <div v-for="item in cards" :key="item.id" class="card-box-item">
          <span>{{ item.num }}</span>
          <span>{{ item.title }}</span>
        </div>
        <!-- <el-card class="">
        </el-card> -->
      </div>
    </div>

    <div class="wrapper">
      <h3 class="title">最新通知消息</h3>
      <el-table :data="tableData" border>
        <el-table-column prop="case_type" label="案件类型" align="center" />
        <el-table-column prop="case_content" label="内容" align="center" />
        <el-table-column prop="case_time" label="时间" align="center" />
      </el-table>
    </div>

    <div class="wrapper">
      <h3 class="title">案件趋势</h3>
      <line-chart :chart-data="lineChartData" />
    </div>
  </div>
</template>

<script>
import LineChart from '@/views/report/lineChart'

export default {
  name: 'Work',
  data() {
    return {
      duty: {
        name: '张三',
        tel: '13800000000'
      },
      dutyOptions: [
        { value: '13800000000', label: '张三' },
        { value: '13700000000', label: '李四' },
        { value: '13600000000', label: '王五' },
      ],
      tableData: [],
      cards: [
        {
          id: 1,
          num: 123,
          title: '待审批'
        },
        {
          id: 2,
          num: 98,
          title: '待分配'
        },
        {
          id: 3,
          num: 98,
          title: '未签收'
        },
        {
          id: 4,
          num: 123,
          title: '待办理'
        },
        {
          id: 5,
          num: 123,
          title: '已反馈'
        }
      ],
      lineChartData: {
        legendData: ['刑事案件', '行政案件', '其它'],
        xAxisData: ['20240301', '20240305', '20240310', '20240315', '20240320', '20240325', '20240330', '20240401'],
        seriesData: [{
          name: '刑事案件',
          // itemStyle: {
          //   color: '#FF005A',
          //   lineStyle: {
          //     color: '#FF005A',
          //     width: 2
          //   }
          // },
          smooth: true,
          type: 'line',
          data: [100, 120, 161, 134, 105, 160, 165, 91],
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        },
        {
          name: '行政案件',
          smooth: true,
          type: 'line',
          // itemStyle: {
          //   color: '#3888fa',
          //   lineStyle: {
          //     color: '#3888fa',
          //     width: 2
          //   },
          //   areaStyle: {
          //     color: '#f3f8ff'
          //   }
          // },
          data: [120, 82, 91, 154, 162, 140, 145, 100],
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        },
        {
          name: '其它',
          smooth: true,
          type: 'line',
          // itemStyle: {
          //   color: '#3888fa',
          //   lineStyle: {
          //     color: '#3888fa',
          //     width: 2
          //   },
          //   areaStyle: {
          //     color: '#f3f8ff'
          //   }
          // },
          data: [145, 100, 120, 161, 134, 105, 120, 82],
          animationDuration: 2800,
          animationEasing: 'quadraticOut'
        }]
      }
    }
  },
  components: {
    LineChart
  },
  mounted() {
    const caseTypeArr = ['刑事案件', '行政案件', '其它']

    const data = Array.from({ length: 3 }, (v, k) => {
      return {
        case_type: caseTypeArr[k % 3],
        case_content: `案件内容_${k}`,
        case_time: `2024-03-01`
      }
    })
    this.tableData = [...data]
  },
  methods: {
    onDutyChange(e) {
      console.log("onDutyChange: ", e)
      this.duty.tel = e
      this.duty.name = this.dutyOptions.find(item => item.value === e).label
    }
  }
}
</script>

<style lang="scss" scoped>
.card-box {
  width: 100%;
  display: flex;

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.duty-box {
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  .el-select {
    margin: 0 30px;
  }
}

.wrapper {
  margin-bottom: 30px;

  .title {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
</style>
